<template>
  <div class="wrapper">
    <div class="hMain">
      <div class="hHead">
        <img v-lazy="userInfo.user.headimgurl" alt>
      </div>
      <div
        style="width:100%; height: .5rem; text-align:center; color:#fff; font-size:.3rem; padding: .3rem 0;"
      >亲爱的{{userInfo.user.nickname}}</div>
      <wheel-word
        :lineHeight="lineHeight"
        :len="listLength"
        :id="id"
        ref="wheel"
        @selectRecord="selectRecord"
      >
        <div class="wheel-word" v-show="show">
          <div class="list-layer" id="wheel-word">
            <div v-for="(item,index) in texts" :key="index">{{item.text}}</div>
          </div>
        </div>
      </wheel-word>
      <div class="voiceMsg">
        念出以上文字，
        <br>发音要准，姿势要帅，
        <br>读出你的国际范！
      </div>
      <div
        class="hVoice"
        v-show="isShowVoiceBtn"
        @touchstart.stop.prevent="tStart()"
        @touchend.stop.prevent="tEnd()"
      >
        <img class="saclebtn" src="http://assets.rurushishi.com/activies/zdfzh/voice_mike.png" alt>
      </div>
      <div class="voiceText">长按朗读</div>
      <!-- <div class="hTextImg">
      <img src="http://assets.rurushishi.com/activies/mfAct/vText.png" alt="">
      </div>-->
      <div class="return" @click="ret">
        <img
          class="saclebtn"
          src="http://assets.rurushishi.com/activies/zdfzh/voice_backindex.png"
          alt
        >
      </div>
    </div>

    <div class="voice-pop-layer" v-show="showVoice">
      <img src="http://assets.rurushishi.com/activies/mfAct/voice.png">
      <img src="http://assets.rurushishi.com/activies/jbAct/voice.gif" alt class="gif">
    </div>

    <!-- <div class="msgPrize" v-show="isShowPrize">
      <div class="msgPrizeImg">
        <img src="http://assets.rurushishi.com/activies/jbAct/prize.png" alt>
      </div>
    </div>-->
    <div class="writeinfo" v-show="prizeInfo.flag">
      <div class="writeinfo_warp">
        <!-- <div class="writeinfo_bg">
          <img src="http://assets.rurushishi.com/activies/zdfzh/voice_write_info_bg2.png" alt>
        </div>-->
        <div class="writeinfo_prizeinfo">
          {{prizeInfo.prizeType==1?"恭喜您获得至多100元随机话费！":""}}
          {{prizeInfo.prizeType==2?"恭喜您中精美玻璃套碗啦！":""}}
        </div>
        <div class="writeinfo_tips">填写以下信息领取奖励！</div>
        <div class="writeinfo_name" v-show="prizeInfo.prizeType==2">
          <input v-fixedInput v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名">
        </div>
        <div class="writeinfo_mobile">
          <input v-fixedInput v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号">
        </div>
        <div class="writeinfo_code">
          <div class="left">
            <input v-fixedInput v-model="userWriteForm.code" type="text" placeholder="请输入验证码">
          </div>
          <div class="right">
            <div class="writeinfo_code_btn saclebtn" @click="clickCode">{{VerShowTxt}}</div>
          </div>
        </div>
        <div class="writeinfo_add" v-show="prizeInfo.prizeType==2">
          <Multiselect
            v-model="userWriteForm.addr"
            :options="addrList"
            placeholder="请选择领奖地址"
            :searchable="false"
            @input="selectAddr"
            :allow-empty="false"
            :show-labels="false"
            track-by="name"
            label="name"
          >
            <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
          </Multiselect>
          <div class="writeinfo_add_detail">{{userWriteForm.addrDetail}}</div>
        </div>
        <div class="writeinfo_btns">
          <div class="writeinfo_btns_close saclebtn" @click="clickClose">关闭</div>
          <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">提交</div>
        </div>
      </div>
    </div>
    <Bottom :baseText="baseText"></Bottom>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { mapState, mapMutations } from "vuex";
import * as config from "./config";
import request from "@/utils/request";
import wx from "weixin-js-sdk";
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import WheelWord from "@/components/common/WheelWord";
import Bottom from "@/components/common/Bottom";
import Multiselect from "vue-multiselect";
export default {
  components: {
    "wheel-word": WheelWord,
    Bottom: Bottom,
    Multiselect: Multiselect
  },
  watch: {
    userWriteForm: {
      handler() {
        if (this.userWriteForm.code.length > 4) {
          this.userWriteForm.code = this.userWriteForm.code.substring(0, 4);
        }
      },
      deep: true
    }
  },
  data() {
    return {
      openid: Cookies.get("openid"),
      userInfo: {
        user: {
          nickname: "",
          headimgurl: ""
        }
      }, //用户信息
      // 统计信息接口返回的对象
      count: {
        isVoice: false,
        isVote: false,
        powerCount: 0,
        powerPrizeCount: 0,
        prizeCode: null,
        prizeCount: 0, //中奖人总数
        total: 0 //参与人总数
      },
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      // 读完语音抽奖返回的结果
      prizeInfo: {
        prizeType: 0, // 1虚拟奖 ，2 实体奖
        id: 0,
        flag: false //是否中奖
      },
      // 用户填写的信息
      userWriteForm: {
        name: "",
        mobile: "",
        code: "",
        addr: "",
        addrName: "",
        addrDetail: ""
      },
      lineHeight: 1, //rem
      listLength: 3, //循环长度
      id: "wheel-word",
      show: false,
      baseText: config.BASE_TEXT,
      showVoice: false,
      reOpenid: this.$route.query.reOpenid ? this.$route.query.reOpenid : "",
      stime: "",
      etime: "",
      matchedText: "", //选中的文字
      matchedTextId: "", //选中的文字的id
      voice: {
        localId: "",
        serverId: "",
        time: ""
      },
      isShowVoiceBtn: false, //是否显示 读语音的按钮，用于接口获取完参与情况再展示
      IsCanVer: true, //是否能发送验证码
      VerShowSec: 60, //读秒
      VerShowTxt: "获取验证码",
      texts: [
        {
          id: 33,
          text: "中鼎24周年庆礼惠全城老百姓",
          activityId: 13,
          activityProjectId: 50,
          activityProjectName: "中鼎理想城",
          appId: null,
          appName: null,
          status: 1,
          createTime: 1556413956000
        },
        {
          id: 34,
          text: "中鼎好房全城不怕比",
          activityId: 13,
          activityProjectId: 50,
          activityProjectName: "七拾九號院",
          appId: null,
          appName: null,
          status: 1,
          createTime: 1556414006000
        },
        {
          id: 35,
          text: "精工善筑品质人生",
          activityId: 13,
          activityProjectId: 50,
          activityProjectName: "中鼎麒麟郡+",
          appId: null,
          appName: null,
          status: 1,
          createTime: 1556414009000
        },
        {
          id: 36,
          text: "中鼎周年庆六盘联合五大行动",
          activityId: 13,
          activityProjectId: 50,
          activityProjectName: "中鼎麒麟湾",
          appId: null,
          appName: null,
          status: 1,
          createTime: 1556414029000
        },
        {
          id: 37,
          text: "中鼎集团三好住宅五心社区",
          activityId: 13,
          activityProjectId: 50,
          activityProjectName: "中鼎麒麟公馆",
          appId: null,
          appName: null,
          status: 1,
          createTime: 1556414171000
        }
      ],
      addrList: [
        {
          name: "中鼎理想城",
          detail:
            "滨江路与学院路（公园西街）交叉口东北角，中鼎理想城体验中心，电话：0319-2331111"
        },
        {
          name: "中鼎麒麟公馆",
          detail:
            "中鼎麒麟公馆：开元路与龙泉大街交叉口东行200米路北，电话：0319-5998111、0319-3551111"
        },
        {
          name: "中鼎麒麟郡+",
          detail:
            "中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777"
        }
      ]
    };
  },

  computed: {
    ...mapState(["info", "channel"])
  },

  methods: {
    // 滚动文字组件选中的记录
    selectRecord(index) {
      this.matchedText = this.texts[index].text;
      this.matchedTextId = this.texts[index].id;
    },
    // 开始读语音
    tStart(e) {
      let that = this;
      that.showVoice = true;
      that.stime = Date.parse(new Date());
      //开始录音
      wx.startRecord({
        cancel: function() {
          that.showVoice = false;
          MessageBox.alert("用户拒绝授权录音", "提示");
        }
      });
      //监听录音自动停止
      wx.onVoiceRecordEnd({
        complete: function(res) {
          that.showVoice = false;
          that.voice.localId = res.localId;
        }
      });
      return false;
    },
    // 结束读语音
    tEnd() {
      // alert("tEnd");
      let that = this;
      wx.stopRecord({
        success: function(res) {
          // alert("stopRecord Success");
          // alert(JSON.stringify(res));
          that.voice.localId = res.localId;
          that.showVoice = false;
          that.translateVoice();
        },
        fail: function(res) {
          // alert("stopRecord fail");
          that.showVoice = false;
          MessageBox.alert(res, "提示");
        }
      });
    },
    // 识别语音
    translateVoice() {
      let that = this;
      // alert("识别语音" + that.voice.localId);
      that.etime = Date.parse(new Date());
      let time = (that.etime - that.stime) / 1000;
      if (time <= 0) {
        time = 1;
      }
      wx.translateVoice({
        localId: that.voice.localId,
        complete: function(res) {
          // alert(JSON.stringify(res));
          if (res.hasOwnProperty("translateResult")) {
            res.translateResult = res.translateResult.split("。")[0];
            // 文字匹配
            that
              .textMatch(that.matchedText, res.translateResult)
              .then(function(isMatch) {
                // alert(isMatch);
                if (isMatch) {
                  // 读对了
                  wx.uploadVoice({
                    localId: that.voice.localId,
                    success: function(res) {
                      // alert(JSON.stringify(res));
                      that.voice.serverId = res.serverId;
                      if (that.count.isVoice) {
                        MessageBox.alert("您已经领过奖了！", "提示");
                      } else {
                        that.voice.time = time;
                        // 语音匹配
                        // alert(
                        //   `that.matchedTextId${
                        //     that.matchedTextId
                        //   }  that.matchedText${that.matchedText}`
                        // );
                        that
                          .voiceMatch(
                            that.matchedTextId,
                            that.matchedText,
                            that.voice.serverId
                          )
                          .then(function(data) {
                            // alert(JSON.stringify(data));
                            if (data.flag) {
                              if (data.id && data.id != 0) {
                                // 中奖了
                                that.prizeInfo = data;
                              } else {
                                // 奖品没有了
                                MessageBox.alert(
                                  "您来晚了，奖品已经发放完了！",
                                  "提示"
                                ).then(() => {
                                  that.gotoUrl("index");
                                });
                              }
                            } else {
                              // 没中奖
                              MessageBox.alert(
                                "要字正腔圆哦，再试一次！精美礼品已迫不及待，等你带走！",
                                "提示"
                              ).then(() => {
                                window.ConfigAudio.play();
                                that.show = false;
                                that.$nextTick(() => {
                                  that.show = true;
                                });
                              });
                            }
                          });
                      }
                    }
                  });
                } else {
                  // 读错了
                  MessageBox.alert(
                    "要字正腔圆哦，再试一次！精美礼品已迫不及待，等你带走！",
                    "提示"
                  ).then(() => {
                    window.ConfigAudio.play();
                    that.show = false;
                    that.$nextTick(() => {
                      that.show = true;
                    });
                  });
                }
              });
          } else {
            MessageBox.alert("无法识别", "提示").then(() => {
              window.ConfigAudio.play();
              that.show = false;
              that.$nextTick(() => {
                that.show = true;
              });
            });
          }
        }
      });
    },
    // 点击返回首页
    ret() {
      this.gotoUrl("index");
    },
    // 选择地址下拉列表框
    selectAddr: function(data) {
      this.userWriteForm.addrName = data.name;
      this.userWriteForm.addrDetail = data.detail;
      console.log(this.userWriteForm);
    },
    // 点击获取验证码
    clickCode: function() {
      let that = this;
      if (that.IsCanVer) {
        var phone = that.userWriteForm.mobile;
        if (phone.length == 0) {
          MessageBox.alert("请输入手机号！");
        } else if (!utils.isMobile(phone)) {
          MessageBox.alert("请输入正确的手机号！");
        } else {
          that.IsCanVer = false;
          that.VerShowTxt = that.VerShowSec + "s";
          that.VerShowSec--;
          setInterval(function() {
            if (that.IsCanVer == false) {
              if (that.VerShowSec == 0) {
                that.VerShowTxt = "获取验证码";
                that.IsCanVer = true;
                that.VerShowSec = 60;
              } else {
                that.VerShowTxt = that.VerShowSec + "s";
                that.VerShowSec--;
              }
            }
          }, 1000);
          that.getSmsCode().then(function(data) {
            MessageBox.alert("验证码已发送到您的手机！");
          });
        }
      }
    },
    // 点击关闭表单
    clickClose: function() {
      this.prizeInfo.flag = false;
    },
    // 点击提交表单
    clickSubmit: function() {
      let that = this;
      var name = that.userWriteForm.name;
      var phone = that.userWriteForm.mobile;
      var vercode = that.userWriteForm.code;
      var address = that.userWriteForm.addrDetail;
      if (that.prizeInfo.prizeType == 2 && name.length == 0) {
        MessageBox.alert("请输入姓名！");
      } else if (phone.length == 0) {
        MessageBox.alert("请输入手机号！");
      } else if (!utils.isMobile(phone)) {
        MessageBox.alert("请输入正确的手机号！");
      } else if (vercode.length == 0) {
        MessageBox.alert("请输入验证码！");
      } else if (that.prizeInfo.prizeType == 2 && address.length == 0) {
        MessageBox.alert("请选择领奖地址！");
      } else {
        // 提交
        console.log("userWriteForm", that.userWriteForm);
        // alert(JSON.stringify(that.userWriteForm));
        that.getVoicePrize().then(function(data) {
          config.addUserInfoWithPhoneAndBindRegister(
            that.receiveSpreadInfo.ouid,
            that.openid,
            phone,
            name
          );
          console.log("getVoicePrize", data);
          // alert(JSON.stringify(data));
          //提交成功
          MessageBox.alert("提交成功！").then(() => {
            that.gotoUrl("index", 1);
          });
        });
      }
    },
    // 领取语音奖励
    getVoicePrize: function() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}getVoicePrize?activityId=${
              config.activityId
            }&address=${encodeURIComponent(that.userWriteForm.addrDetail)}&code=${
              that.userWriteForm.code
            }&id=${that.prizeInfo.id}&lat=1&lng=1&mobile=${
              that.userWriteForm.mobile
            }&name=${encodeURIComponent(that.userWriteForm.name) || "1"}&projectId=${
              config.projectId
            }`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 获取验证码
    getSmsCode() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}getSmsCode?activityId=${
              config.activityId
            }&mobile=${that.userWriteForm.mobile}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 语音匹配
    voiceMatch(voiceId, voiceMatchText, mediaId) {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}voiceMatch?activityId=${
              config.activityId
            }&openId=${
              that.openid
            }&voiceId=${voiceId}&voiceMatchText=${voiceMatchText}&mediaId=${mediaId}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 文本匹配
    textMatch(command, word) {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .get(that.global.API_URL, {
            action: "/activity/stt/SttAction/textMatch",
            requestParam: {
              command: command,
              word: word
            }
          })
          .then(function(data) {
            resolve(data.obj);
          });
      });
    },
    // 获取语音列表
    getVoiceList() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .get(
            `${that.global.API_ACT_URL}voiceList?activityId=${
              config.activityId
            }`,
            {}
          )
          .then(function(data) {
            that.texts = list;
            resolve();
          });
      });
    },
    // 参加活动，返回是否领过读语言和助力的奖品、统计人数
    getCount() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}participate?activityId=${
              config.activityId
            }&openId=${that.openid}&channel=${that.receiveSpreadInfo.channel}${
              that.receiveSpreadInfo.fuid
                ? "&fromOpenId=" + that.receiveSpreadInfo.fuid
                : ""
            }`,
            {}
          )
          .then(function(data) {
            that.count = data;
            resolve();
          });
      });
    },
    // 提交分享成功回调
    shareCallBack() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}share?activityId=${
            config.activityId
          }&openId=${that.openid}`,
          {}
        )
        .then(function(data) {});
    },
    // 初始化背景音乐
    initBgm() {
      if (!window.ConfigAudio) {
        window.ConfigAudio = new Audio();
        window.ConfigAudio.src =
          "http://assets.rurushishi.com/activies/mfAct/voice.mp3";
        wx.ready(function() {
          window.ConfigAudio.play();
        });
      } else {
        window.ConfigAudio.src =
          "http://assets.rurushishi.com/activies/mfAct/voice.mp3";
        wx.ready(function() {
          window.ConfigAudio.play();
        });
      }
    },
    // 跳转本项目的其他链接
    gotoUrl(page, isShowShare) {
      // 带上本页面的传播信息,isShowShare在跳转到index的时候展示探照灯。
      let url =
        location.protocol +
        "//" +
        location.host +
        this.global.GLOBAL_BASE_PATH +
        "/";
      if (this.$route.fullPath.indexOf("?") > -1) {
        url += page + "?" + this.$route.fullPath.split("?")[1];
        if (isShowShare) {
          url += "&isshare=1";
        }
      } else {
        url += page;
        if (isShowShare) {
          url += "?isshare=1";
        }
      }

      location.href = url;
    },
    /**
     * 初始化
     * 1、设置传播传播信息
     * 2、获取用户信息
     * 3、设置分享信息
     */
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      config.getUserInfo().then(function(userInfo) {
        that.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          shareObj.title = `${
            that.userInfo.user.nickname
          }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
        }

        if (that.userInfo.salerOrAgent) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  mounted() {
    this.show = true;
  },
  created() {
    let that = this;
    this.initBgm();
    this.init();
    Promise.all([this.getCount()]).then(function() {
      that.isShowVoiceBtn = true;
    });
  }
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css">
</style>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';
@import 'comm.styl';

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  pointer-events: none;
}

.gif {
  position: absolute;
  top: 1.7rem;
  left: 0.3rem;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/zdfzh/voice_bg.jpg') repeat center center;
  background-size: 100% 100%;
}

.hMain {
  position: absolute;
  top: 10%;
  width: 100%;
}

.hHead {
  margin: 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  text-align: center;
  border-radius: 50%;
  border: 0.05rem solid #fff;
}

.hHead>img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.15rem solid transparent;
}

.hVoice {
  width: 20%;
  margin: 0 auto;
  margin-top: 0.2rem;
}

.hVoice > img {
  width: 100%;
  height: 100%;
}

.hTextImg {
  padding-top: 0.3rem;
  width: 40%;
  margin: 0 auto;
}

.hTextImg > img {
  width: 100%;
  height: 100%;
}

.voiceText {
  width: 100%;
  text-align: center;
  padding-top: 0.2rem;
  font-size: 0.32rem;
  line-height: 0.4rem;
  color: #fff;
}

.voiceMsg {
  width: 100%;
  text-align: center;
  padding-top: 0.2rem;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: #fff;
  padding-bottom: 0.5rem;
}

.voice-pop-layer {
  position: absolute;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* width: 100%; */
  -webkit-user-select: none;
  top: 3rem;
  left: 50%;
  margin-left: -12.5%;
  height: 2rem;
  width: 25%;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.5);
}

.return {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

.return > img {
  width: 2rem;
}

.msgPrize {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.msgPrize .msgPrizeImg {
  box-sizing: border-box;
  padding: 2rem 1rem 1rem 1rem;
}

.msgPrize .msgPrizeImg>img {
  width: 100%;
}

.wheel-word {
  width: 6rem;
  background: #fff;
  margin: 0 auto;
  height: 1rem;
  border-radius: 0.5rem;
  font-size: 0.36rem;
  color: #211914;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-layer {
  > div {
    min-height: 1rem;
    line-height: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
  }
}

.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/zdfzh/voice_write_info_bg2.png') repeat center center;
  background-size: 100% 100%;
  padding: 0.5rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 100%;
  text-align: center;
  font-size: 0.35rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 15px;
  width: 80%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 15px;
  width: 80%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code .left {
  width: 55%;
}

.writeinfo_code .right {
  width: 45%;
}

.writeinfo_code input {
  border-radius: 15px;
  width: 100%;
  height: 30px;
  text-indent: 15px;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  width: 90%;
  margin-left: 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background-color: #eee1a9;
}

.multiselect {
  width: 80%;
  margin: 0 auto;
  height: 0.6rem;
}

.writeinfo_add_detail {
  width: 80%;
  margin: 0.3rem auto 0 auto;
  color: #ffffff;
  line-height: 0.4rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

.writeinfo_btns >div {
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #eee1a9;
  border-radius: 0.3rem;
}

[contenteditable='true'], input, textarea {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important;
}
</style>
